<template>
	<view>
		<view class="personalCard">
			<image src="@/static/my.png"></image>
			<view class="myInfo">
				<text class="textInfo">{{user.schoolName}}</text>
				<text class="textInfo" v-text="`${user.name}`"></text>
				<!-- <text class="textInfo" v-text="`${user.name}(${user.roleTypeName})`"></text> -->
				<text class="unbind" @click="unbind">退出</text>
				<view class="detail-info">
					<!-- 学生、家长 展示学生信息-->
					<view v-if="calMenuShow('我的-学生')">
						<view class="info-row">
							<text>学号:{{userDetail.number}}</text>
							<text>班级:{{userDetail.className}}</text>
						</view>
						<view class="info-row">
							<text>专业:{{userDetail.majorName}}</text>
							
							<text>班主任:{{userDetail.headmasterName}}</text>
						</view>
					</view>
					<view v-if="calMenuShow('我的-老师')">
						<text>教工编号:{{userDetail.jobNumber || ''}}</text>
						<text>组织:{{userDetail.deptName || ''}}</text>
					</view>
				</view>
			</view>
			<view class="radar" v-if="calMenuShow('我的-雷达')">
				<canvas canvas-id="canvasRadar" id="canvasRadar" class="charts"></canvas>
			</view>
		</view>
	</view>
</template>

<script>
	const STUDENT = 'student';
	const TEACHER = 'teacher'
	import common from '../../libs/login.js';
	import {dictCode} from '../../libs/common.js'
	import userMixins from '../../libs/userMixins.js';
	import radarMixinx from '../../libs/radarMixins.js'
	export default {
		mixins: [userMixins, radarMixinx],
		data() {
			return {
				userDetail: '',
			}
		},
		async onShow(){
			this.userDetail = await this.fetchUserDetail();
			this.assignRadarData(this.userDetail.attributesList);
		},
		methods: {
			unbind() {
				uni.navigateTo({
					url: "./unbind"
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.personalCard {
		display: block;

		image {
			width: 750upx;
			height: 361upx;
			display: block;
		}

		.myInfo {
			width: 690upx;
			height: 281upx;
			padding: 50upx;
			margin: -270upx auto 0 auto;
			background: rgba(255, 255, 255, 1);
			box-shadow: 0upx 2upx 7upx 0upx rgba(0, 0, 0, 0.1);
			border-radius: 8upx;
			position: relative;
			text{
				display: block;
				font-size:28upx;
				font-family:Source Han Sans CN;
				font-weight:400;
				color:rgba(153,153,153,1);
			}
			.textInfo{
				font-size:34upx;
				font-family:Source Han Sans CN;
				font-weight:400;
				color:rgba(51,51,51,1);
			}
			.detail-info {
				padding-top: 20upx;
				font-size:28upx;
				font-family:Source Han Sans CN;
				font-weight:400;
				color:rgba(153,153,153,1);
				.info-row {
					padding-top: 10upx;
					display: flex;
					justify-content: space-between;
				
				}
			}
			.unbind{
				color:rgba(60,104,229,1);
				position: absolute;
				right: 50upx;
				top: 50upx;
			}
		}
		.radar {
			padding: 50upx;
			width: 690upx;
			height: 500upx;
			background-color: #FFFFFF;
		}
		.charts {
			width: 690upx;
			height: 500upx;
			background-color: #FFFFFF;
		}
		
	}
</style>
